<template>
  <div class="">
    <!-- <x-header class="header" :left-options="{backText: ''}">宽带安装</x-header> -->
    <div class="pad" style="font-size:0.8em;">
      <!-- <div class="msg">已选择<span class="product">“大王卡”</span></div> -->
        <div class="msg">根据国家实名制要求，请准确提供身份证信息</div>
      <group title="" label-width="5.5em" label-margin-right="2em">
        
        <x-input title="姓名" placeholder="输入联系人姓名" v-model="fname"></x-input>
        <x-input title="身份证号" placeholder="输入身份证号" v-model="unumber"></x-input>
        <x-input title="联系电话" placeholder="联系人手机号码" mask="999 9999 9999" v-model="fmobile" :max="13" is-type="china-mobile" required></x-input>
        <br/>
        <divider>请选择号码</divider>
        <popup-picker title="所在地区" :data="addresslist" v-model="faddress[0]" placeholder="请选择盟市" value-text-align="left"></popup-picker>
        <x-input title="详细地址" placeholder="街道/镇+村/小区/写字楼+门牌号" v-model="faddress[1]"></x-input>
        <x-input title="选择号码" placeholder="" v-model="selmobile" :max="13" readonly required @click.native="showDialog"></x-input>
      </group>
      <div style="padding:15px;">
        <check-icon :value.sync="agree"  type="plain"><span style="font-size:0.85em;">我已阅读并同意《客户入网服务协议及业务协议》</span></check-icon>
        <br/>
        <br/>
        <x-button @click.native="onSubmit" :gradients="['#82C2E6', '#7CA700']">立即提交</x-button>
      </div>
    </div>
    <div>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">可选号码</p>
        <div class="img-box" style="height:300px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <ul>
            <li v-for="(x,i) in mobilePool" :key="i" @click="onSelect(x)">{{x}}</li>
          </ul>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, XInput, Divider, XNumber, XButton,PopupPicker,XDialog,CheckIcon } from "vux";
import map from 'lodash/map';
// let HOST="http://10.68.50.117:8084";
// let HOST="http://192.168.0.105:8084";
let HOST="http://weixin.nmict.cn:8084";
let list1=[['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟']];
export default {
  data() {
    return {

      addresslist:list1,
      faddress:[],
      fmobile: '',
      fname: "",
      unumber: "",
      selmobile:"",
      showScrollBox:false,
      agree:true,
      mobilePool:[]
    };
  },
  methods: {
    onSubmit() {
     
      if (this.fmobile == "" || this.fname == "" || this.fnumber == "") {
        this.$vux.toast.show({
          type: "warn",
          text: "请填写必要信息"
        });
        return;
      }
      
      
      this.$store.dispatch("orderAdd", {
        fmobile: this.fmobile.replace(/ /g, ""),
        faddress: this.faddress[0]+" "+this.faddress[1],
        fname: this.fname,
        unumber: this.unumber,
        selmobile:this.selmobile
      }).then(resp => {
        let ret=resp.data
        if(ret.errCode!="0"){
          alert(ret.message);
          return;
        }
        this.$router.push({ name: "Result" });
      });
      
    },
    onSelect(item){
      this.selmobile=item;
      this.showScrollBox=false;
    },
    showDialog(){
      this.showScrollBox=true
      this.$store.dispatch("numberPool").then(resp=>{
        this.mobilePool=map(resp.data.items,'code')
      })
    },
   
  },
  components: {
    XHeader,
    Group,
    XInput,
    Divider,
    XNumber,
    XButton,
  
    PopupPicker,
    XDialog,
    CheckIcon
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/close';

.msg{
  line-height: 2.25em;
  padding-left: 0.8em;
  font-size: 1.15em;
  .product{
    color:#dba95e;
  }
}
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
    li{
      list-style: none;
      float: left;
      width:130px;
      margin-top:8px;
    }
  }
  .vux-close {
    // margin-top: 8px;
    // margin-bottom: 8px;
  }
}
</style>
